<template>
  <div class='container'>
    <el-card>
      <!-- form表单搜索新增 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="学科名称">
          <el-input  size="small" v-model="subjectName" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small"  @click="onClear">清除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button  size="small"   type="primary" @click="onSelect">查询</el-button>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-button
          class="filter-item fr"
          size="small"
          @click="addSubject"
          style="margin-left: 10px;"
          type="success"
          icon="el-icon-edit"
        >新增学科</el-button>
        </el-form-item>
        </el-form>
         <!-- end -->
         <!-- 数据记录 -->
         <el-alert
         v-if="total !== 0"
         :title="'数据一共'+total+'条'"
         type="info"
         class="alert"
         :closable="false"
         show-icon
       ></el-alert>
       <!-- end -->
       <!-- table表格数据 -->
       <el-table
       ref="singleTable"
       :data="tableData"
       style="width: 100%;">
       <el-table-column
         label="序号"
         type="index"
         width="120">
       </el-table-column>
       <el-table-column
         property="subjectName"
         label="学科名称"
         width="180">
       </el-table-column>
       <el-table-column
         property="username"
         label="创建者"
         width="180">
       </el-table-column>
       <el-table-column
         property="addDate"
         label="创建日期"
         width="250">
       </el-table-column>
       <el-table-column
       property="isFrontDisplay"
       label="前台是否显示"
       width="170">
       </el-table-column>
       <el-table-column
         property="twoLevelDirectory"
         label="二级目录"
         width="170">
       </el-table-column>
       <el-table-column
         property="tags"
         label="标签"
         width="170">
       </el-table-column>
       <el-table-column
         property="totals"
         label="题目数量"
         width="170">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="subjectClassfy(row)">学科分类</el-button>
            <el-button type="text" @click="subjectTag(row)">学科标签</el-button>
            <el-button type="text" @click="editSubject(row.id)">修改</el-button>
            <el-button type="text" @click="removeSubject(row)">删除</el-button>
          </template>
        </el-table-column>
     </el-table>
       <!-- end -->
       <!-- 分页组件 -->
       <el-pagination
       style="float:right; padding: 20px 0;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="pagesizes"
      :page-size="pagesize"
      layout="prev, pager, next, sizes, jumper"
      :total="total"
      background>
    </el-pagination>
    <!-- 弹框组件 -->
    <Dialog ref="editUser" :isEdit="isEdit" :getSubjectList="getSubjectList" :id="id"></Dialog>
    </el-card>
  </div>
</template>

<script>
import { list as subjectList, remove as subjectRemove } from '@/api/hmmm/subjects'
import Dialog from '../components/subjects-add.vue'
export default {
  components: {
    Dialog
  },
  data () {
    return {
      subjectName: '', // 学科名称
      pagesize: 10, // 当前每页显示多少条
      pagesizes: [5, 10, 20, 50], // 每页显示多少条
      page: 1, // 当前页
      total: 0, // 总条数
      tableData: [], // 学科列表
      isEdit: false, // 是否编辑操作
      id: 0
    }
  },
  created () {
    // 获取学科列表
    this.getSubjectList()
  },

  methods: {
    // 清除按钮
    onClear () {
      // 清空搜索框
      this.subjectName = ''
    },
    // 查询按钮
    onSelect () {
      // 当前页码置位1
      this.page = 1
      // 获取学科列表
      console.log(1111111)
      this.getSubjectList()
    },
    // 新增学科按钮
    addSubject () {
      // 是否编辑为false
      this.isEdit = false
      // 调用子组件方法
      this.$refs.editUser.dialogFormV()
    },
    // handleCurrentChange (val) {
    //   this.currentRow = val
    // }
    // 每页显示条数变化时触发
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.page = 1
      this.pagesize = val
      // 获取学科列表
      this.getSubjectList()
    },
    // 当前页变化时触发
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page = val
      // 获取学科列表
      this.getSubjectList()
    },
    // 获取学科列表
    async getSubjectList () {
      // 调用接口，获取数据
      const { data } = await subjectList({ page: this.page, pagesize: this.pagesize, subjectName: this.subjectName })
      // console.log(data)
      // 将返回的学科列表给tableData
      this.tableData = data.items
      this.tableData.forEach(item => {
        item.isFrontDisplay === 1 ? item.isFrontDisplay = '是' : item.isFrontDisplay = '否'
        item.addDate = item.addDate.slice(0, -5).slice(0, 10) + item.addDate.slice(0, -5).slice(11, 20)
      })
      // 将返回的总条数给total
      this.total = data.counts
    },
    // 删除学科
    async removeSubject (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (row.twoLevelDirectory === 0 && row.tags === 0) {
          // 发送请求，删除学科
          const { data } = await subjectRemove({ id: row.id })
          if (data.success) { this.$message.success('删除成功') }
          // 重新发送请求获取学科列表
          this.getSubjectList()
        } else {
          this.$message.error('该学科下有二级目录或标签，不允许删除')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑学科
    async editSubject (id) {
      // 调用子组件方法
      await this.$refs.editUser.getsubjectDetail(id)
      // 是否编辑为true
      this.isEdit = true
      // 调用子组件方法
      this.$refs.editUser.dialogFormV()
      // 将id存储在data中
      this.id = id
    },
    // 学科分类
    subjectClassfy (row) {
      // console.log(row)
      // 跳转目录管理页并将学科信息传递过去
      this.$router.push({ path: './directorys', query: { subjectInfo: row, isShow: true } })
    },
    // 学科标签
    subjectTag (row) {
      // 跳转标签管理页并将学科信息传递过去
      this.$router.push({ path: './tags', query: { subjectInfo: row, isShow: true } })
    }
  }
}

</script>

<style scoped lang='less'></style>
